<template>
  <div id="app">
    <div
      :class="[
        'parent',
        colorObj.cycan ? 'cyan' : '',
        colorObj.blue ? 'blue' : '',
        colorObj.gray ? 'gray' : ''
      ]"
    >
      <div class="top">
        <div class="left" @click="cycans">
          颜色切换按钮
        </div>
        <div class="right" @click="showColor">颜色显示按钮</div>
      </div>
      <div class="bottom">
        <Child1></Child1>
        <Child2></Child2>
      </div>
    </div>
  </div>
</template>
<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
export default {
  data() {
    return {
      colorObj: {
        cycan: false,
        blue: false,
        gray: false
      },
      color: '#fffff'
    }
  },
  // 通过 vue依赖注入
  provide() {
    return {
      getBlue: this.blues,
      grayes: this.grayes
    }
  },
  methods: {
    cycans() {
      this.colorObj = {
        cycan: !this.colorObj.cycan,
        blue: false,
        gray: false
      }
      if (this.colorObj.cycan) {
        this.color = '#5fa916'
      } else {
        this.color = '#fffff'
      }
    },
    // 颜色显示
    showColor() {
      alert(`当前颜色值：${this.color}`)
    },
    // 父组件传递给子组件1的方法
    blues() {
      this.colorObj = {
        cycan: false,
        blue: !this.colorObj.blue,
        gray: false
      }
      if (this.colorObj.blue) {
        this.color = '#0150ef'
      } else {
        this.color = '#fffff'
      }
    },
    // 父组件传递给子组件2的方法
    grayes() {
      this.colorObj = {
        cycan: false,
        blue: false,
        gray: !this.colorObj.gray
      }
      if (this.colorObj.gray) {
        this.color = '#f9f7ed'
      } else {
        this.color = '#fffff'
      }
    }
  },
  components: {
    Child1,
    Child2
  }
}
</script>
<style lang="less" scoped>
.parent {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    /* text-align: center; */
    padding: 20px;
    margin-bottom: 10px;
    .left {
      height: 50px;
      line-height: 50px;
      width: 120px;
      text-align: center;
      background-color: #5fa916;
      color: #ffffff;
      margin-right: 20px;
      border-radius: 10px;
      border: 1px solid black;
    }
    .right {
      height: 50px;
      line-height: 50px;
      width: 120px;
      text-align: center;
      background-color: #f9f7ed;
      color: black;
      border-radius: 10px;
      border: 1px solid black;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
}
.cyan {
  background-color: #5fa916;
}
.blue {
  background-color: #0150ef;
}
.gray {
  background-color: #d6d6d6;
}
</style>
